<!-- 构造表单拖拽页面的容器 -->
<template>
  <el-container class="fm2-container">
    <div class="eo-vis-editor-header ">
      <ul class="eo-vis-menu-bar ng-isolate-scope">
        <!-- ngIf: eoVisMenuBar.isModelLoaded -->
        <li
          ng-if="eoVisMenuBar.isModelLoaded"
          class="eo-vis-menu-bar-element ng-scope"
        >
          <div class="eo-vis-menu ng-isolate-scope">
            <div
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              @click="saveJson"
              e-tooltip-html="true"
              tabindex="0"
              title="保存"
              aria-disabled="false"
            >
              <i
                class="fa fa-floppy-o"
                style="font-size: 20px;"
                aria-hidden="true"
              ></i>
            </div>
          </div>

          <div
            class="eo-vis-menu eo-vis-menu--single ng-scope ng-isolate-scope"
          >
            <div
              e-tooltip-html="true"
              title="预览"
              @click="handlePreview"
              style="font-size: 28px;"
              ng-disabled="eoVisFormPreview.isDisabled()"
              ng-click="eoVisFormPreview.getFormPreview()"
              ng-show="eoVisMenuBar.isFormEditor()"
              tabindex="0"
              aria-hidden="false"
              aria-disabled="false"
              class="eo-vis-menu-svgWrapper ng-isolate-scope"
            >
              <i
                class="layui-icon layui-icon-read"
                style="font-size: 20px;"
                aria-hidden="true"
              ></i>
            </div>
          </div>

          <div
            class="eo-vis-menu ng-scope ng-isolate-scope ng-hide"
            ng-show="eoVisDocker.isVisible()"
            ng-if="!eoVisMenuBar.isDMNEditor() &amp;&amp; eoVisMenuBar.activeModelHasCanvas()"
            aria-hidden="true"
          >
            <div
              @click="handleLeft"
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Auto layout"
              tabindex="0"
            >
              <i
                class="layui-icon layui-icon-align-left"
                aria-hidden="true"
              ></i>
            </div>
            <div
              @click="handleTop"
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Delete a docker from an edge, by ctrl + click on it"
              ng-click="eoVisDocker.enableDeleteDocker()"
              tabindex="0"
            >
              <i
                class="layui-icon layui-icon-align-center"
                aria-hidden="true"
              ></i>
            </div>

            <div
              @click="handleRight"
              class="eo-vis-menu-svgWrapper "
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Change the position of shapes"
              ng-click="eoVisShapeTranslate.translateShapes()"
              tabindex="0"
            >
              <i
                class="layui-icon layui-icon-align-right"
                aria-hidden="true"
              ></i>
            </div>
          </div>
        </li>
        <!-- end ngIf: eoVisMenuBar.isModelLoaded -->
      </ul>
    </div>
    <!--        <el-button v-if="upload" type="warning" size="mini" round icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>-->
    <!--        <el-button v-if="generateJson" type="success" size="mini" round icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>-->

    <el-main class="fm2-main">
      <el-container>
        <el-aside width="250px">
          <div class="components-list">
            <div class="widget-cate">基础字段</div>
            <draggable
              tag="ul"
              :list="basicComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label"
                :class="{ 'no-put': item.type == 'divider' }"
                v-for="(item, index) in basicComponents"
                :key="index"
              >
                <a>
                  <i class="icon iconfont" :class="item.icon"></i>

                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>

            <div class="widget-cate">面板控件</div>
            <draggable
              tag="ul"
              :list="advanceComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label"
                :class="{ 'no-put': item.type == 'table' }"
                v-for="(item, index) in advanceComponents"
                :key="index"
              >
                <a>
                  <i class="icon iconfont" :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>
            <div class="widget-cate">导航</div>
            <draggable
              tag="ul"
              :list="navigationComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label no-put"
                v-for="(item, index) in navigationComponents"
                :key="index"
              >
                <a>
                  <i class="icon iconfont" :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>

            <div class="widget-cate">布局字段</div>
            <draggable
              tag="ul"
              :list="layoutComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label no-put"
                v-for="(item, index) in layoutComponents"
                :key="index"
              >
                <a>
                  <i class="icon iconfont" :class="item.icon"></i>
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>
            <div class="widget-cate">不常用字段</div>
            <draggable
              tag="ul"
              :list="uncommonlyUsedComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label no-put"
                v-for="(item, index) in uncommonlyUsedComponents"
                :key="index"
              >
                <a>
                  <i :class="item.icon" style="margin-left: 5px"></i>
                  <span class="uncommonlyUsedComponentsSpan">{{
                    item.name
                  }}</span>
                </a>
              </li>
            </draggable>

            <div class="widget-cate">自定义组件</div>
            <draggable
              tag="ul"
              :list="customComponents"
              v-bind="{
                group: { name: 'people', pull: 'clone', put: false },
                sort: false,
                ghostClass: 'ghost'
              }"
              @end="handleMoveEnd"
              @start="handleMoveStart"
              :move="handleMove"
            >
              <li
                class="form-edit-widget-label no-put"
                v-for="(item, index) in customComponents"
                :key="index"
              >
                <a>
                  <i :class="item.icon" style="margin-left: 5px"></i>
                  <span class="uncommonlyUsedComponentsSpan">{{
                    item.name
                  }}</span>
                </a>
              </li>
            </draggable>
          </div>
        </el-aside>
        <el-container class="center-container" direction="vertical">
          <el-header class="btn-bar" style="height: 45px;">
            <slot name="action"> </slot>
            <el-button
              v-if="generateJson"
              type="success"
              size="mini"
              round
              icon="el-icon-tickets"
              @click="handleGenerateJson"
              >生成JSON</el-button
            >
            <el-button
              v-if="preview"
              type="info"
              size="mini"
              round
              icon="el-icon-view"
              @click="handlePreview"
              >预览</el-button
            >
            <el-button
              v-if="clearable"
              type="danger"
              size="mini"
              round
              icon="el-icon-delete"
              @click="handleClear"
              >清空</el-button
            >
            <el-button
              v-if="upload"
              type="warning"
              size="mini"
              round
              icon="el-icon-upload2"
              @click="handleUpload"
              >导入JSON</el-button
            >
          </el-header>

          <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
            <!-- 中部表单放着区域 -->
            <!-- sync 在子组件当中修改父组件的某个数据-->
            <widget-form
              v-if="!resetJson"
              ref="widgetForm"
              :data="widgetForm"
              :select.sync="widgetFormSelect"
            >
            </widget-form>
          </el-main>
        </el-container>
        <!-- 右侧字段和表单属性放置区域 -->
        <el-aside class="widget-config-container">
          <el-container>
            <el-header height="45px">
              <div
                class="config-tab"
                :class="{ active: configTab == 'widget' }"
                @click="handleConfigSelect('widget')"
              >
                字段属性
              </div>
              <div
                class="config-tab"
                :class="{ active: configTab == 'form' }"
                @click="handleConfigSelect('form')"
              >
                表单属性
              </div>
            </el-header>
            <el-main class="config-content">
              <!-- configTab 确定显示字段属性还是表单属性  -->
              <widget-config
                v-show="configTab == 'widget'"
                :data="widgetFormSelect"
                :structData="widgetForm"
                @getBlockData="getBlockData(arguments)"
              ></widget-config>
              <form-config
                ref="formConfig"
                @getjson="getData($event)"
                v-show="configTab == 'form'"
                :data="widgetForm.config"
                :form="widgetForm"
              ></form-config>
              <widget-config
                ref="widgetConfig"
                @getBlockData="getBlockData($event)"
              ></widget-config>
            </el-main>
          </el-container>
        </el-aside>
        <!-- 预览的组件 -->
        <cus-dialog
          :visible="previewVisible"
          @on-close="previewVisibleClose"
          :title="widgetForm.config.formName"
          ref="widgetPreview"
          width="1000px"
          form
        >
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>{{ widgetForm.config.formName }}</span>
            </div>
            <div class="text item">
              <generate-form
                insite="true"
                v-if="previewVisible"
                :data="widgetForm"
                :value="widgetModels"
                :remote="remoteFuncs"
                ref="generateForm"
              >
              </generate-form>
            </div>
          </el-card>

          <template slot="action">
            <el-button type="primary" @click="handleTest">获取数据</el-button>
            <el-button @click="handleReset">重置</el-button>
          </template>
        </cus-dialog>

        <cus-dialog
          :visible="uploadVisible"
          @on-close="uploadVisible = false"
          @on-submit="handleUploadJson"
          ref="uploadJson"
          width="800px"
          form
        >
          <el-alert
            type="info"
            title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
          ></el-alert>
          <div id="uploadeditor" style="height: 400px;width: 100%;">
            {{ jsonEg }}
          </div>
        </cus-dialog>

        <cus-dialog
          :visible="jsonVisible"
          @on-close="jsonVisible = false"
          ref="jsonPreview"
          width="800px"
          form
        >
          <div id="jsoneditor" style="height: 400px;width: 100%;">
            {{ jsonTemplate }}
          </div>

          <template slot="action">
            <el-button
              type="primary"
              class="json-btn"
              :data-clipboard-text="jsonCopyValue"
              >复制数据</el-button
            >
          </template>
        </cus-dialog>

        <cus-dialog
          :visible="codeVisible"
          @on-close="codeVisible = false"
          ref="codePreview"
          width="800px"
          form
          :action="false"
        >
          <div id="codeeditor" style="height: 500px; width: 100%;">
            {{ htmlTemplate }}
          </div>
        </cus-dialog>
      </el-container>
    </el-main>
    <el-footer height="30px" style="font-weight: 600;"
      >Powered by
      <a target="_blank" href="">BPM-表单组件</a>
    </el-footer>
  </el-container>
</template>

<script>
import Draggable from "vuedraggable"; // vue拖动插件,拖动元素放在transition-group中
import WidgetConfig from "./WidgetConfig"; // 右侧 字段属性组件
import FormConfig from "./FormConfig"; //右侧 表单属性组件
import WidgetForm from "./WidgetForm"; // 生成中间区域表单的组件
import CusDialog from "./CusDialog";
import GenerateForm from "./GenerateForm";
import Clipboard from "clipboard"; //复制输入框,文本域,div元素到粘贴板中
// 所有表单的基本配置
import {
  basicComponents,
  layoutComponents,
  advanceComponents,
  navigationComponents,
  uncommonlyUsedComponents,
  customComponents,
} from "./componentsConfig.js";
import { loadJs, loadCss } from "../util/index.js";
import request from "../util/request.js"; // ajax请求
import API from "./router/api.js";
import { verification } from "./router/verification.js";
import { isRepeat } from "./router/utils.js";

export default {
  name: "fm-making-form",
  components: {
    Draggable,
    WidgetConfig,
    FormConfig, // 表单属性组件
    WidgetForm,
    GenerateForm,
    cusDialog: CusDialog
  },
  props: {
    // 验证父组件传入数据的类型
    preview: {
      type: Boolean,
      default: false
    },
    generateJson: {
      type: Boolean,
      default: false
    },
    upload: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },

  data() {
    //  设置表单属性的相关字段
    return {
      basicComponents,
      layoutComponents,
      advanceComponents,
      navigationComponents,
      uncommonlyUsedComponents,
      customComponents,

      resetJson: false,
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: "right",
          size: "small",
          customClass: "",
          formName: "表单名称", //表单名称
          customStyle: "",
          customJs: "",
          jsExpand: "",
          disable: false,
          showAnnotation: false,
          formNumber: this.createOrderNo() // 表单序号
        }
      },
      configTab: "widget", // 默认显示字段属性
      widgetFormSelect: null,

      previewVisible: false,
      jsonVisible: false,
      codeVisible: false,
      uploadVisible: false,
      remoteFuncs: {
        func_test(resolve) {
          setTimeout(() => {
            const options = [
              {
                id: "1",
                name: "1111"
              },
              {
                id: "2",
                name: "2222"
              },
              {
                id: "3",
                name: "3333"
              }
            ];

            resolve(options);
          }, 2000);
        },

        upload_callback(response, file, fileList) {
          //console.log('callback', response, file, fileList)
        }
      },
      widgetModels: {},
      blank: "",
      htmlTemplate: "",
      jsonTemplate: "",
      uploadEditor: null,
      jsonCopyValue: "",
      jsonClipboard: null,
      jsonEg: `{
  "list": [
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "icon-grid-",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "cccc",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656611793",
                "remoteOptions": []

              },
              "novalid": {},
              "key": "1572656611793",
              "model": "day",
              "rules": [
                {
                  "type": "string",
                  "message": "请假格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "开始时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656630994",
                "remoteOptions": []
              },
              "key": "1572656719473",
              "model": "start",
              "rules": [],
              "novalid": {}
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假人",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656647372",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656647372",
              "model": "user",
              "rules": [
                {
                  "type": "string",
                  "message": "请假人格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "结束时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656676710",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656736023",
              "model": "end",
              "rules": []
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "center",
        "align": "middle",
        "customClass": "",
        "remoteFunc": "func_1572656606443"
      },
      "key": "1572656606443",
      "model": "grid_1572656606443",
      "rules": []
    }
  ],
  "config": {
    "labelWidth": 100,
    "labelPosition": "right",
    "size": "small",
    "customClass": "",
	"formName":"请假流程",
	"formNumber":12323222
  }
}`
    };
  },
  mounted() {
    // 初始化表单数据渲染
    this.getFormData();
  },

  methods: {
    validatePass(rule, info, callback) {
      verification(rule, info, callback, null);
    },
    // 菜单栏的方法
    handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    getA() {},
    // handleGoGithub () {
    //   window.location.href = 分享牛'
    // },
    // 初始化获取表单数据
    getFormData() {
      if (this.$route) {
        let params = this.$route.query;
        if (params) {
          var id = params.id;
          if (id) {
            request
              .get(API.prefix + "/form/bus/render/start/get/" + id)
              .then(res => {
                var data = res.data;
                var code = res.code;
                if (code == 0) {
                  this.handleFixedJson(data);
                } else {
                  //this.$message.error(res.msg);
                }
              });
          }
        }
      }
    },

    // 生成订单序列号
    createOrderNo() {
      var outTradeNo = ""; //订单号
      for (
        var i = 0;
        i < 6;
        i++ //6位随机数，用以加在时间戳后面。
      ) {
        outTradeNo += Math.floor(Math.random() * 10);
      }
      return new Date().getTime() + outTradeNo; //时间戳，用来生成订单号。
    },
    handleConfigSelect(value) {
      //console.log(value);
      this.configTab = value;
    },
    handleMoveEnd(evt) {
      // 结束的时候触发
      //	console.log('end', evt)
    },
    handleMoveStart({ oldIndex }) {
      // 拖动表单时触发
      //	console.log('2222');
      //console.log('start', oldIndex, this.basicComponents)
    },
    handleMove() {
      return true;
    },
    handlePreview() {
      let style = document.createElement("style");
      style.type = "text/css";
      style.innerText =
        ".el-row--flex {\n" +
        "                    display: block ;\n" +
        "                }";

      document.getElementsByTagName("head")[0].appendChild(style);

      this.previewVisible = true;
    },
    previewVisibleClose() {
      let style = document.createElement("style");
      style.type = "text/css";
      style.innerText =
        ".el-row--flex {\n" +
        "                    display: flex ;\n" +
        "                }";

      document.getElementsByTagName("head")[0].appendChild(style);

      this.previewVisible = false;
    },
    handleLeft() {
      var config = this.widgetForm.config;
      config.labelPosition = "left";
    },
    handleRight() {
      var config = this.widgetForm.config;
      config.labelPosition = "right";
    },
    handleTop() {
      var config = this.widgetForm.config;
      config.labelPosition = "top";
    },

    handleReset() {
      this.$refs.generateForm.reset();
    },
    getAnnotationAction: function(list, resultList) {
      list.forEach(item => {
        if (item.options) {
          resultList[item.model] = item.options.annotationContext;
        } else {
          list = item;
          this.getAnnotationAction(list, resultList);
        }

        if (item.tabColumns) {
          list = item.tabColumns;
          this.getAnnotationAction(list, resultList);
        }
        if (item.tableColumns) {
          list = item.tableColumns;
          this.getAnnotationAction(list, resultList);
        }
      });
    },

    handleTest() {
      this.$refs.generateForm
        .getData()
        .then(data => {
          this.jsonVisible = true;
          for (var key in data) {
            if (data[key] == undefined) {
              data[key] = "";
            }
          }
          var list = this.$refs.formConfig.form.list;
          var resultList = {};
          this.getAnnotationAction(list, resultList);
          var dataObj = {};

          data["annotation"] = resultList;
          this.jsonTemplate = data;
          this.$nextTick(() => {
            const editor = ace.edit("jsoneditor");
            editor.session.setMode("ace/mode/json");

            if (!this.jsonClipboard) {
              this.jsonClipboard = new Clipboard(".json-btn");
              this.jsonClipboard.on("success", e => {
                this.$message.success("复制成功");
              });
            }
            this.jsonCopyValue = JSON.stringify(data);
          });
          this.$refs.widgetPreview.end();
        })
        .catch(e => {
          this.$refs.widgetPreview.end();
        });
    },

    handleGenerateJson() {
      this.jsonVisible = true;
      this.jsonTemplate = this.widgetForm;
      //console.log(JSON.stringify(this.widgetForm))
      this.$nextTick(() => {
        const editor = ace.edit("jsoneditor");
        editor.session.setMode("ace/mode/json");

        if (!this.jsonClipboard) {
          this.jsonClipboard = new Clipboard(".json-btn");
          this.jsonClipboard.on("success", e => {
            this.$message.success("复制成功");
          });
        }
        this.jsonCopyValue = JSON.stringify(this.widgetForm);
      });
    },

    saveJson() {
      this.jsonTemplate = this.widgetForm;
      // console.log(JSON.stringify(this.widgetForm))
      let params = this.$route.query;
      var id = params.id;
      let param = new FormData();
      param.append(
        "jsonStr",
        encodeURIComponent(JSON.stringify(this.widgetForm))
      );
      var allKeys = [];
      this.widgetForm.list.find(item => {
        allKeys.push(item.model);
      });
      var repeate = isRepeat(allKeys);
      if (typeof repeate === "boolean") {
        request
          .post(API.prefix + "/form/design/saveJson/" + id, param, {
            headers: { "content-type": "application/x-www-form-urlencoded" }
          })
          .then(data => {
            // console.log(data)
            if (data.code == 0) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        var obj = this.widgetForm.list.find(item => {
          //这里的userList就是上面遍历的数据源
          return item.model === repeate; //筛选出匹配数据
        });
        this.$message({
          message:
            "「" + obj.name + "」" + "重复定义多次，不能进行表单的保存操作",
          type: "error"
        });
      }
    },

    publish() {
      this.jsonTemplate = this.widgetForm;
      let params = this.$route.query;
      var id = params.id;
      request
        .get(API.prefix + "/form/design/models/publish/" + id)
        .then(res => {
          var data = res.data;
          var code = res.code;
          if (code == 0) {
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    handleGenerateCode() {
      this.codeVisible = true;
      this.$nextTick(() => {
        const editor = ace.edit("codeeditor");
        editor.session.setMode("ace/mode/html");
      });
    },
    handleUpload() {
      this.uploadVisible = true;
      // ace web编辑器
      this.$nextTick(() => {
        this.uploadEditor = ace.edit("uploadeditor");
        this.uploadEditor.session.setMode("ace/mode/json");
      });
    },
    handleUploadJson() {
      try {
        this.setJSON(JSON.parse(this.uploadEditor.getValue()));
        this.uploadVisible = false;
      } catch (e) {
        this.$message.error(e.message);
        this.$refs.uploadJson.end();
      }
    },
    handleFixedJson(data) {
      try {
        this.setJSON(JSON.parse(data));
        this.uploadVisible = false;
      } catch (e) {
        this.$message.error(e.message);
        this.$refs.uploadJson.end();
      }
    },
    handleClear() {
      this.widgetForm = {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: "right",
          size: "small",
          customClass: ""
        }
      };
      this.$refs.formConfig.getA();

      this.widgetFormSelect = {};
    },
    getData(val) {
      var config = this.widgetForm.config;
      var list = this.widgetForm.list;

      for (var i = 0; i < list.length; i++) {
        list[i].options.span = parseInt(val);
      }
    },
    getBlockData(obj) {
      var val = obj[0];
      var key = obj[1];
      var list = this.widgetForm.list;

      for (var i = 0; i < list.length; i++) {
        if (list[i].key == key) {
          var tableColumns = list[i].tableColumns;
          for (var j = 0; j < tableColumns.length; j++) {
            tableColumns[j].options.span = parseInt(val);
          }
          break;
        }
      }
    },
    getHtml() {
    },
    setJSON(json) {
      this.widgetForm = json;

      if (json.list.length > 0) {
        this.widgetFormSelect = json.list[0];
      }
    },
    handleInput(val) {
      //	console.log(val)
      this.blank = val;
    }
  },
  watch: {
    widgetForm: {
      deep: true,
      handler: function(val) {
        //	console.log(this.$refs.widgetForm)
      }
    }
  }
};
</script>

<style lang="scss">
.widget-empty {
  background: url("../assets/form_empty.png") no-repeat;
  background-position: 50%;
}

.custom1 .el-col {
  border: 1px solid #ccc;
  overflow: hidden;
  padding: 5px;
  // margin-right:-1px;
  // margin-bottom:-1px;
  margin-right: -1px;
  margin-bottom: -1px;
}

.custom .el-col {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
div.eo-vis-menu-svgWrapper:hover {
  color: dodgerblue;
}
.eo-vis-menu-bar-element .eo-vis-menu {
  border-right: none !important;
}

.components-list .form-edit-widget-label {
  font-size: 12px;
  display: block;
  width: 48% !important;
  line-height: 26px;
  position: relative;
  float: left;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1%;
  color: #333;
  border: 1px solid #f4f6fc;
}
.uncommonlyUsedComponentsSpan {
  margin-left: 10px;
}
</style>
